<template>
  <a-layout-header class="header">
    <div class="logo" />
    <a-menu
        theme="dark"
        mode="horizontal"
        :style="{ lineHeight: '64px' }"
    >
      <a-menu-item key="/message"><router-link to ="/message">学生打卡信息管理</router-link></a-menu-item>
      <a-menu-item key="/user"><router-link to="/user">学生用户管理 </router-link></a-menu-item>
      <a-menu-item key="/admin"><router-link to="/admin">管理员用户管理</router-link></a-menu-item>
      <a-menu-item  class="logout-menu">
      <a-popconfirm
        title="是否注销，注销将退出登录"
        ok-text="是"
        cancel-text="否"
        @confirm="logout()">
      <a>
        注销
      </a>

      </a-popconfirm>
      </a-menu-item>
    </a-menu>
  </a-layout-header>
</template>


<script lang="ts">
import { defineComponent} from 'vue';
import axios from 'axios'
import {message} from "ant-design-vue";
import router from "@/router";

export default defineComponent({
  name: 'the-header',

  setup(){
    // const logoutModalVisible = ref(false);
    // const logoutModalLoading = ref(false);
    // const showLogoutModal=()=>{
    //   logoutModalVisible.value = true;
    // };




    //登出
    const logout = ()=>{

      console.log("注册中");

      axios({
        url:'/api/logout',
        method:'post'
      }).then(
          (response)=>{
            console.log("response:",response)
            if(response.data.errorCode ==200) {
              message.success("成功注销");
              router.push("/login")
            }
          }
      )

    };

    return{
      logout

    }
  }
});
</script>


<style>
.logout-menu{
  float:right;
  color:white;
}
</style>